﻿<!DOCTYPE html>
<!--[if IE 8]> <html lang="en" class="ie8 no-js"> <![endif]-->
<!--[if IE 9]> <html lang="en" class="ie9 no-js"> <![endif]-->
<!--[if !IE]><!-->
<html lang="en">
<!--<![endif]-->
<!-- BEGIN HEAD -->
<head>
    <meta charset="utf-8" />
    <title></title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta content="width=device-width, initial-scale=1" name="viewport" />
    <meta content="" name="description" />
    <meta content="" name="author" />
    <!-- Bootstrap 3.3.6 -->
    <link rel="stylesheet" href="../content/ui/global/bootstrap/css/bootstrap.min.css">
    <!-- Font Awesome -->
    <link href="../content/ui/global/font-awesome/css/font-awesome.css" rel="stylesheet" />
    <!-- Theme style -->
    <link rel="stylesheet" href="../content/adminlte/dist/css/AdminLTE.css">
    <link rel="stylesheet" href="../content/adminlte/dist/css/skins/_all-skins.min.css">
    <link href="../content/min/css/supershopui.common.min.css" rel="stylesheet"/>

    <link href="../content/plugins/jqgrid/jqgrid.css" rel="stylesheet" />
    <style type="text/css">
    </style>
    <!--全局通用框架样式 end-->
</head>
<body>
    <section class="content-header">
        <h1>
            jqgrid表格
            <small>jqgrid是一个传统表格，功能强大，但是只适用于PC端</small>
        </h1>
        <ol class="breadcrumb">
            <li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li>
            <li><a href="#">Tables</a></li>
            <li class="active">jqgrid</li>
        </ol>
    </section>
    <!-- Main content -->
    <section class="content">

        <div class="row">
            <div class="col-md-12">
                <!-- BEGIN SAMPLE TABLE PORTLET-->
                <div class="box-header with-border">
                    <h3 class="box-title">简单表格</h3>
                </div>
                    <div class="box-body">

                        <div class="gridPanel">
                            <table id="gridTable"></table>
                            <div id="gridPager"></div>
                        </div>

                    </div>
              
            </div>

        </div>
    </section>

<script src="../content/ui/global/jQuery/jquery.min.js"></script>
<!-- Bootstrap 3.3.6 -->

<script src="../content/ui/global/bootstrap/js/bootstrap.min.js"></script>
<script src="../content/min/js/supershopui.common.js"></script>

<script src="../content/plugins/jqgrid/grid.locale-cn.js"></script>
<script src="../content/plugins/jqgrid/jqgrid.min.js"></script>
</body>
<script>
    $(function () {
        InitialPage();
        GetGrid();
    });
    //初始化页面
    function InitialPage() {
        //resize重设(表格、树形)宽高
        $(window).resize(function (e) {
            window.setTimeout(function () {
                $('#gridTable').setGridWidth(($('.gridPanel').width()));
                var height = App.getIframeLayoutHeight();
                $("#gridTable").setGridHeight($(window).height() - height);

            }, 200);
            e.stopPropagation();
        });
    }

    //加载表格
    function GetGrid() {
        var selectedRowIndex = 0;
        var $gridTable = $('#gridTable');
        $gridTable.jqGrid({
            url: "json/jqgriddata.json",
            datatype: "json",
            height: App.getViewPort().height - $('.page-footer').outerHeight() - $('.page-header').outerHeight(),
            colModel: [
                { label: '主键', name: 'F_UserId', hidden: true },
                { label: '账户', name: 'F_Account', index: 'F_Account', width: 100, align: 'left' },
                { label: '姓名', name: 'F_RealName', index: 'F_RealName', width: 100, align: 'left' },
                {
                    label: '性别',
                    name: 'F_Gender',
                    index: 'F_Gender',
                    width: 45,
                    align: 'center',
                    formatter: function (cellvalue, options, rowObject) {
                        return cellvalue == 1 ? "男" : "女";
                    }
                },
                { label: '手机', name: 'F_Mobile', index: 'F_Mobile', width: 100, align: 'center' },
                {
                    label: '公司',
                    name: 'F_OrganizeId',
                    index: 'F_OrganizeId',
                    width: 200,
                    align: 'left',
                    formatter: function (cellvalue, options, rowObject) {
                        return "母公司";
                    }
                },
                {
                    label: '部门',
                    name: 'F_DepartmentId',
                    index: 'F_DepartmentId',
                    width: 100,
                    align: 'left',
                    formatter: function (cellvalue, options, rowObject) {
                        return "开发部";
                    }
                },
                { label: '岗位', name: 'F_DutyName', index: 'F_DutyName', width: 100, align: 'left' },
                { label: '职位', name: 'F_PostName', index: 'F_PostName', width: 100, align: 'left' },
                {
                    label: '角色',
                    name: 'F_RoleId',
                    index: 'F_RoleId',
                    width: 100,
                    align: 'left',
                    formatter: function (cellvalue, options, rowObject) {
                        return "管理员";
                    }
                },
                { label: '主管', name: 'F_Manager', index: 'F_Manager', width: 100, align: 'left' },
                {
                    label: "状态",
                    name: "F_EnabledMark",
                    index: "F_EnabledMark",
                    width: 50,
                    align: "center",
                    formatter: function (cellvalue, options, rowObject) {
                        if (cellvalue == 1) {
                            return '<span onclick=\"btn_disabled(\'' + rowObject.UserId + '\')\" class=\"label label-sm label-success\" style=\"cursor: pointer;\">正常</span>';
                        } else if (cellvalue == 0) {
                            return '<span onclick=\"btn_enabled(\'' + rowObject.UserId + '\')\" class=\"label label-sm label-danger\" style=\"cursor: pointer;\">禁用</span>';
                        }
                    }
                },
                { label: "备注", name: "F_Description", index: "F_Description", width: 200, align: "left" }
            ],
            viewrecords: true,
            rowNum: 20,
            rowList: [30, 50, 100],
            pager: "#gridPager",
            sortname: 'F_OrganizeId asc,F_CreateDate desc',
            rownumbers: true,
            autowidth: true,
            shrinkToFit: false,
            gridview: true,
            onSelectRow: function () {
                selectedRowIndex = $("#" + this.id).getGridParam('selrow');
            },
            gridComplete: function () {
                $("#" + this.id).setSelection(selectedRowIndex, false);
            }
        });

      
    }

</script>
</html>